<template>
  <el-container class="login-one">
    <el-header></el-header>
    <el-main>
      <el-row>
        <el-col :span="8">&nbsp;</el-col>
        <el-col :span="8" style="background: white;border-radius: 15px;height: 260px;">
          <h3 align="center">在线考试系统</h3>
          <el-form label-width="110px">
            <el-form-item label="用户名">
              <el-col :span="18">
                <el-input placeholder="请输入用户名" v-model="userInfo.userName" prefix-icon="el-icon-search"></el-input>
              </el-col>

            </el-form-item>

            <el-form-item label="密码">
              <el-col :span="18">
                <el-input placeholder="请输入密码" v-model="userInfo.userPwd" show-password></el-input>
              </el-col>
            </el-form-item>

            <el-form-item>
              <el-col :span="8">
              </el-col>
              <el-col :span="8">
                <el-button type="success" @click="login()" icon="el-icon-check" round>登录</el-button>
              </el-col>
              <el-col :span="8">
                <el-button type="info" round>取消</el-button>
              </el-col>
            </el-form-item>

          </el-form>
        </el-col>
        <el-col :span="8">&nbsp;</el-col>
      </el-row>
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        userInfo: {
          userName: "",
          userPwd: ""
        }
      }
    },
    methods: {
      login() {
        var self = this;
        $.ajax({
          url: "http://localhost:8080/login/list",
          data: self.userInfo,
          type: "post",
          contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
          success: function(data) {
            if (data.info == "登录成功") {
              var value = self.userInfo.userName;
              localStorage.setItem("studentId",data.user.studentId);
              localStorage.setItem("name", value);
              self.$router.replace({
                "name": "index"
              });
            } else {
              alert("账号或密码错误！！！")
              self.$router.replace({
                "name": "login"
              })
            }
          }
        })
        // self.$message(self.userInfo.userName + " 登录成功");
        // this.$alert("登录成功");
      }
    }
  }
</script>

<style>
  html,
  body {
    margin: 0px;
    height: 100%;
  }

  .el-header,
  .el-footer {

    color: #333;
    text-align: center;
    /* line-height: 60px; */
  }

  .el-main {

    color: #333;
    text-align: center;
    height: 90%;
    /* line-height: 160px; */
  }

  .login-one {
    background-color: #1c77ac;
    background-image: url(../assets/light.png);
    background-repeat: no-repeat;
    /* //background-position:center top;*/
    overflow: hidden;
  }
</style>